<script setup lang="ts">
import { Select, CloseBold } from '@element-plus/icons-vue'
interface IProp {
  size?: string | number
  type: 'success' | 'fail'
}

withDefaults(defineProps<IProp>(), {
  size: 70
})
</script>

<template>
  <div class="result-wrapper" :class="type" :style="{ width: size + 'px', height: size + 'px' }">
    <el-icon v-if="type === 'success'" :size="45"><Select /></el-icon>
    <el-icon v-else :size="45"><CloseBold /></el-icon>
  </div>
</template>

<style lang="scss" scoped>
.result-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 999px;
  color: #fff;
  &.success {
    background-color: var(--el-color-success);
  }
  &.fail {
    background-color: var(--el-color-error);
  }
}
</style>
